<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-container>
        <el-main>
          <el-form-item
            label="设备名称"
            prop="name"
            :rules="[
              { required: true, message: '设备不能为空'}
            ]"
          >
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="启用">
            <el-switch v-model="form.delivery" />
          </el-form-item>
          <el-form-item
            label="关联站点"
            prop="date1"
            :rules="[
              { required: true, message: '关联站点不能为空'}
            ]"
          >
            <el-input v-model="form.date1" />
          </el-form-item>
          <el-form-item label="关联回路">
            <el-input v-model="form.date2" />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input v-model="form.resource" />
          </el-form-item>
          <el-form-item label="">
            <img class="QRCode" src="../../../assets/401_images/401.gif">
          </el-form-item>
        </el-main>
        <el-aside>
          <el-form-item>
            <el-button class="special_button" type="primary" @click="onSubmit('form')">立即创建</el-button>
          </el-form-item>
        </el-aside>
      </el-container>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'devices.typeDelimit',
  components: {
  },
  props: {
    choseData: {
      type: Object,
      required: {}}
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎0',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎1',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎2',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎3',
        text: true,
        switchVal: true,
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  mounted() {
    console.log(this.choseData)
  },
  methods: {
    onSubmit(form) {
      console.log(this.$refs[form])
      this.$refs[form].validate((valid) => {
        console.log(valid)
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    choseTable(data) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].text = true
      }
      data.text = false
    },
    saveTable(data, index) {
      console.log(index)
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].text = true
      }
    },
    deleteTable(data, index) {
      console.log(index)
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .tableHead{
    background-color: #EDF1F8!important;
  }
.handleBox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  &>div:nth-child(2){
    flex-shrink: 0;
    margin-left: 23px;
    font-size: 15px;
    color: #707070;
    &>image{
      width: 20px;
      height: 22px;
    }
  }
  &>.el-input{
    // padding-left: 0;
    &> ::v-deep input{
      padding-left: 0;
    }
  }
}
.delete{
 font-size: 15px;
 color: #5595FF;
 cursor: pointer;
}
.switch_box{
  display: flex;
  align-items: center;
  justify-content: center;
}
 ::v-deep .cell{
    width: 100%;
    height: 100%;
    text-align: center;
  }
.el-aside{
  background-color: white;
}
::v-deep .el-button{
  margin-left: -80px;
}
.QRCode{
  width: 208px;
  height: 208px;
}
</style>
